<template>
    <view>
        <common-tab-bar :tabs="tabs" :hasBbottom="true" :background="background" @clickTab="handleClickTab" />
        <choose-date
            v-if="activeTabIndex == 4 && !isFilter"
            ref="chooseDatePanel"
            class="choose-date"
            :startDate="startDate"
            :endDate="endDate"
            @selDate="selDate">
        </choose-date>
        <uni-drawer v-if="activeTabIndex == 4 && isFilter" ref="showRight" mode="right" :width="320">
            <drawer-container @reset="handleReset" @sure="handleSure">
                <sale-filter />
            </drawer-container>
        </uni-drawer>
    </view>
</template>

<script>
import { CHANGE_DATE, CHANGE_SALE_SELECTED,CHANGE_CUSTOM_SELECTED } from "@/store/mutation-type.js"
import utils from "@/utils/utils.js"
import chooseDate from "./choose-date.vue"
import saleFilter from "../new-sale/childCpns/sale-filter.vue"
import { mapState, mapMutations } from "vuex"

export default {
    components: {
        chooseDate,
        saleFilter,
    },
    props: {
        background: {
            type: String,
            default: "",
        },
        isFilter: {
            type: Boolean,
            default: false,
        },
    },
    computed: {
        ...mapState("tabBar", ["activeTabIndex"]),
        ...mapState("report", ["startDate", "endDate"]),
    },
    data() {
        return {
            tabs: [],
        }
    },
    created() {
        this.getTabs()
        this.judgeShowModal()
    },
    methods: {
        ...mapMutations("report", [CHANGE_DATE, CHANGE_SALE_SELECTED,CHANGE_CUSTOM_SELECTED]),
        getTabs() {
            const commonTabs = [
                {
                    title: "今日",
                },
                {
                    title: "本周",
                },
                {
                    title: "本月",
                },
                {
                    title: "本年",
                },
            ]
            if (this.isFilter) {
                this.tabs = [...commonTabs, { icon: "icon-shaixuan1" }]
            } else {
                this.tabs = [...commonTabs, { title: "自定义" }]
            }
        },
        judgeShowModal() {
            if (this.activeTabIndex == 4) {
                if (this.isFilter) {
                    this.$nextTick(() => {
                        this.$refs.showRight.open()
                    })
                } else {
                    this.$nextTick(() => {
                        this.$refs.chooseDatePanel.openStarDate()
                    })
                }
            }
        },
        handleClickTab(index) {
            let dateForm = {}
            if (index == 0) {
                // 今日
                dateForm.startDate = utils.today().startDate
                dateForm.endDate = utils.today().endDate
            } else if (index == 1) {
                // 本周
                dateForm.startDate = utils.thisWeek().startDate
                dateForm.endDate = utils.thisWeek().endDate
            } else if (index == 2) {
                // 本月
                dateForm.startDate = utils.thisMonth().startDate
                dateForm.endDate = utils.thisMonth().endDate
            } else if (index == 3) {
                // 本年
                dateForm.startDate = utils.thisYear().startDate
                dateForm.endDate = utils.thisYear().endDate
            } else if (index == 4) {
                dateForm.startDate = ""
                dateForm.endDate = ""
                if (!this.isFilter) {
                    this.$nextTick(() => {
                        this.$refs.chooseDatePanel.openStarDate()
                    })
                } else {
                    this.$nextTick(() => {
                        this.$refs.showRight.open()
                    })
                }
            }
            if (!(this.isFilter && index == 4)) {
                this[CHANGE_DATE](dateForm)
                this.$emit("getNewData")
            }
        },
        selDate(e) {
            if (e) {
                const [startDate, endDate] = e.split(",")
                this[CHANGE_DATE]({ startDate, endDate })
            }
        },
        handleReset() {
            this.$refs.showRight.close()
            this[CHANGE_DATE]({ startDate: "", endDate: "" })
            this[CHANGE_SALE_SELECTED]()
			this[CHANGE_CUSTOM_SELECTED]([])
            this.$emit("getNewData")
        },
        handleSure() {
            this.$refs.showRight.close()
            this.$emit("getNewData")
        },
    },
}
</script>

<style lang="scss">
.choose-date {
    background-color: $uni-bg-color-grey;
}
</style>
